<template>
  <device_manage
    :search="search"
    @handleInfo="handleInfo"
    :dataProcessing="dataProcessing"
  >
    <device_condition title="选择照明类型" :content-style="{display: 'flex', alignItems: 'center'}">
      <span>照明类型</span>
      <el-select v-model="search.illuminationType" size="small" style="width: 150px;overflow: hidden;margin-left: 5px">
        <el-option :value="0" label="楼层照明"/>
        <el-option :value="1" label="景观照明"/>
      </el-select>
    </device_condition>
    <template #spaceContent>
      <div class="switch-box">
        <el-button v-for="(item, index) in switchArr"
                   :key="index"
                   type="info"
                   size="small"
                   :class="{currentSwitch: currentSwitch === index}"
                   @click="currentSwitch = index"
        >
          {{ item }}
        </el-button>
      </div>
    </template>
    <template #list-search>
      <el-col :span="4.8">
        <el-button type="info" size="small"><i class="el-icon-s-operation"/>批量控制</el-button>
      </el-col>
      <el-col :span="4.8">
        <span>照明启停</span>
        <el-select v-model="search.startupStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in startupStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <span>照明状态</span>
        <el-select v-model="search.illuminationStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in illuminationStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <span>运行状态</span>
        <el-select v-model="search.runningStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in runningStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <span>报警状态</span>
        <el-select v-model="search.alarmStatus" size="small" placeholder="全部" clearable>
          <el-option v-for="item in alarmStatusArr" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <el-input placeholder="请输入设备名称/编号搜索" v-model="search.text" size="small" class="search" clearable>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </template>
    <template #table-column>
      <el-table-column type="selection" width="50"/>
      <el-table-column prop="name" label="名称" min-width="120px"/>
      <el-table-column prop="no" label="编号" min-width="120px"/>
      <el-table-column prop="powerSupplyNo" label="供电编号" show-overflow-tooltip min-width="120px"/>
      <el-table-column prop="whereUsed" label="回路位置" show-overflow-tooltip min-width="120px"/>
      <el-table-column label="运行状态" width="80px">
        <template v-slot="{row}">
          <span>{{ runningStatusArr[row.runningStatus].label }}</span>
        </template>
      </el-table-column>
      <el-table-column label="照明状态" width="80px">
        <template v-slot="{row}">
          <span>{{ illuminationStatusArr[row.illuminationStatus].label }}</span>
        </template>
      </el-table-column>
      <el-table-column label="照明启停" width="80px">
        <template v-slot="{row}">
          <span>{{ startupStatusArr[row.startupStatus].label }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报警状态" width="80px">
        <template v-slot="{row}">
          <span>{{ alarmStatusArr[row.alarmStatus].label }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150px">
        <template v-slot="{row}">
          <el-button size="small" @click="handleControl(row)">控制</el-button>
          <el-button size="small" @click="handleInfo(row)">详情</el-button>
        </template>
      </el-table-column>
    </template>
  </device_manage>
</template>

<script>
import Device_manage from "./device_manage";
import Device_condition from "./device_condition";
import img from "../../assets/test/v2_qy1dqg.png";
import '../../assets/css/device-dialog.css'

export default {
  name: "illumination",
  components: {Device_condition, Device_manage},
  data() {
    return {
      search: {
        illuminationStatus: null,
        illuminationType: 0,
        text: '',
        runningStatus: null,
        alarmStatus: null,
        startupStatus: null,
      },
      runningStatusArr: [
        {value: 0, label: '在线'},
        {value: 1, label: '离线'},
      ],
      alarmStatusArr: [
        {value: 0, label: '正常'},
        {value: 1, label: '报警'},
      ],
      startupStatusArr: [
        {value: 0, label: '开启'},
        {value: 1, label: '关闭'},
      ],
      illuminationStatusArr: [
        {value: 0, label: '开启'},
        {value: 1, label: '关闭'},
      ],
      info: {
        name: '',
        no: '',
      },
      switchArr: ['全开', '全关', '早晨', '午间', '下午', '晚上', '夜间'],
      currentSwitch: null,
    }
  },
  methods: {
    handleControl(info) {
      this.info = info;
    },
    handleInfo(info) {
      this.info = info;
    },
    dataProcessing() {
      const tableData = [];
      for (let i = 0; i < 10; i++) {
        tableData.push({
          id: i,
          name: '普通照明灯',
          no: '12345678',
          powerSupplyNo: 'T1-B1',
          whereUsed: '图书馆-1层',
          runningStatus: 0,
          illuminationStatus: 0,
          startupStatus: 0,
          alarmStatus: 0,
        })
      }
      return tableData;
    }
  }
}
</script>

<style scoped>
.switch-box {
  margin: 10px 50px;
}

.currentSwitch {
  color: #000;
  background-color: #fff;
  border-color: #00b09e;
}
</style>
